§00 · Unde suntem
Platforma e la ~8/10. Ce o desparte de 10 nu sunt ecrane noi — e disciplină pe trei principii.
Am parcurs automat toate ecranele (16 rute + detalii + portal), am evaluat fiecare pe cinci dimensiuni și am iterat propuneri pe cele mai slabe scoruri. Propunerile sunt împărțite în trei iterații — de la quick-win-uri fără risc pentru demo, la restructurări pe ecran, la finisajul care se simte „scump". Fiecare propunere majoră are un wiremock hi-fi „Acum → Propus" construit în tokenii v5 reali.
| Ecran | Ierarhie | Densitate | Consistență | Feedback | Total | Simptomul dominant |
|---|---|---|---|---|---|---|
| Atelier (board) | 7 | 6 | 9 | 9 | 7.8 | 5 straturi de crom înainte de primul card |
| Ofertare | 6 | 7 | 8 | 8 | 7.3 | buton pe fiecare variantă — decizia clientului arată ca a consilierului |
| Contabilitate | 7 | 6 | 8 | 8 | 7.3 | carduri pentru date tabulare; KPI cu aer excesiv |
| Execuție Service | 8 | 6 | 9 | 8 | 7.8 | benzi 90% goale, carduri mici cu text trunchiat |
| Flux în direct (panou) | 7 | 6 | 9 | 9 | 7.8 | același număr + mașină repetate pe fiecare eveniment |
| Fișa Service (detaliu) | 8 | 8 | 6 | 8 | 7.5 | valori read-only în casete gri care arată ca inputuri |
| Constatare | 8 | 7 | 9 | 9 | 8.3 | nume trunchiate lângă spațiu gol |
| Aprovizionare | 9 | 8 | 9 | 9 | 8.8 | ✔ swimlane per mașină livrat azi — rămâne progresul per mașină |
| Relații Clienți · Rapoarte · Portal | 9 | 8 | 9 | 9 | 8.8 | aproape acolo — doar finisaj (Iterația 3) |
Scoruri 1–10 pe grila din 05_UI_CONVENTIONS (ierarhie vizuală · densitate utilă · consistență de limbaj · feedback la acțiune). Cele trei ecrane marcate roșu pe „densitate/ierarhie" sunt candidații naturali pentru „cele 3 ecrane încărcate" din review-ul vizual.
Ce e deja în platformă (sigur pentru demo)
P2 Fișa Service ca listă de fapte · P6 Flux în direct grupat per mașină · P7 Contabilitate ca tabel dens sortabil · P9 numere românești (1.234,50 €) + tabular pe oferte, facturi, portal, piese · P10 tranziții consecvente + respectă „reduce motion" · P11 bară de progres piese per mașină. Toate presentation-only — mașina de stări și regulile RG1–RG3 sunt neatinse; verificat cu suita E2E (591/591 + 39/39) și probele de reguli.
Rămân, deliberat, după demo: P1 (comprimarea cromului din Atelier), P3 (fațete-link), P4 (Ofertare ca tabel comparativ), P5 (rânduri late), P8 (mod prezentare) și coregrafia „card-ul alunecă în banda următoare" din P10 — aceasta din urmă ar atinge board-ul și nu merită riscul înainte de demo.
§01 · Trei principii transversale
Aceleași trei greșeli explică aproape tot ce ne ține sub 10.
🔒
Read-only nu se îmbracă în input
Fapte (proveniență, preț de listă, client, sursă) apar în casete gri sau câmpuri editabile. Utilizatorul pierde timp întrebându-se „pot să modific asta?". Livrat azi pe „Ofertă nouă"; rămâne Fișa Service (P2).
🥞
Un singur strat de crom
Toolbar + banner „ce faci aici" + lentile + filtre + legendă + banner Gogu = ~230px înainte de primul card. Fiecare e util; împreună sufocă. Regula: maxim două rânduri deasupra conținutului, restul la cerere.
🫙
Spațiul gol e informație
Benzi cu 1–2 carduri mici trunchiate lasă 80% din lățime moartă. Când banda are ≤3 elemente, cardul devine rând full-width — numele întreg, acțiunea la dreapta, zero trunchiere. Livrat azi pe Aprovizionare (swimlane per mașină).
Aer și ierarhie — fără risc pentru demo
Atelier: cromul paginii comprimat la două rânduri
Banner-ul „un singur job", filtrele de valoare, legenda de fațete și bannerul Gogu se mută într-un singur rând compact: banner-ul devine subtitlul toolbarului, filtrele intră într-un buton „Filtre", legenda devine popover pe „?", Gogu devine o pastilă cu CTA. Programarea zilei rămâne — e conținut, nu crom.
Acum · 5 straturiEfort: S · Impact: mare (fiecare vizită pe Atelier) · Risc demo: mic — pur layout, zero logică.
Fișa Service: faptele ca text, nu casete-input livrat ✓
Client, telefon, sursă, intrat, problemă — toate sunt fapte, dar stau în casete gri identice cu inputurile dezactivate. Propunem listă de definiții: etichetă mică sus, valoarea ca text simplu, despărțitor fin. Aceeași familie de fix ca „Ofertă nouă" (livrat azi).
Efort: S · Impact: mediu (orice deschidere de fișă) · Risc demo: mic.
Fațete clicabile + stări goale care spun pasul următor
Fațetele de pe card („Const ✓ · Ofertă ! · Piese —", acum sincronizate live) devin deep-link-uri: atingi „Ofertă !" → aterizezi pe Ofertare cu mașina preselectată. Iar „Gol" din benzi devine acțiune: „Nimic în Recepție — mesajele WhatsApp noi apar aici · Deschide Recepția". Costă puțin, se simte de zece ori mai viu.
Efort: S · Impact: mediu · Risc demo: mic.
Restructurări pe ecran — cele mai vizibile salturi
Ofertare: variantele ca tabel comparativ, o singură acțiune primară
Azi fiecare variantă are propriul buton („Trimite oferta" ×2, „Retrimite", „Marchează aprobată" ×2) — cinci butoane pe un card, iar „aprobarea" e de fapt decizia clientului, nu a consilierului. Propunem: variantele una lângă alta, diferențele aliniate pe rânduri, starea ca etichetă, și un singur buton primar pe card care urmează starea reală (Trimite → Așteaptă clientul → Vezi aprobarea).
Acum · 5 butoane, 3 rânduri repetitiveEfort: M · Impact: mare (ecranul central al banilor) · Risc demo: mediu — de făcut după demo sau pe branch, cu probele existente ca plasă.
Benzi cu puține elemente → rânduri late (Execuție, Constatare)
Când o bandă are ≤3 elemente, cardul de 216px cu „Hyund…" lângă 80% spațiu gol e cea mai proastă variantă posibilă. Regulă de layout adaptiv: sub 4 elemente, elementele devin rânduri full-width cu toate datele pe orizontală; peste, grila actuală.
AcumEfort: M (o componentă „RowCard" + prag în benzi) · Impact: mare pe ecranele executanților · Risc demo: mediu-mic.
Flux în direct: evenimente grupate per mașină livrat ✓
Panoul repetă „B-412-ELM · Skoda Octavia 2019" pe fiecare din cele 8 evenimente consecutive ale aceleiași mașini. Propunem grupare: un antet per mașină (aceeași grupare pe care am livrat-o azi la piese), evenimentele dedesubt ca mini-timeline compact, doar delta („Mutat → Ofertare", „Piese +3").
Efort: M · Impact: mare (panoul e deschis permanent în demo) · Risc demo: mediu-mic — e un panou izolat.
Contabilitate: facturile ca tabel, nu carduri livrat ✓
Contabila lucrează în coloane: număr, client, mașină, sumă, stare SPV. Cardurile pe 2 coloane rup scanarea verticală. Propunem tabel dens cu rând clicabil (detaliul rămâne în panoul lateral), sortare pe antet, iar KPI-urile de sus comprimate pe un singur rând.
PropusEfort: M · Impact: mediu (rolul Corina) · Risc demo: mic — pagină izolată. Eroarea SPV primește verb („rezolvă"), nu doar etichetă.
Ce transformă „foarte bun" în „10"
Mod prezentare (proiector)
Un toggle care ridică baza tipografică cu ~1.5px și duce text-faint la contrast AA. La demo pe proiector/TV, textele de 9.5–10.5px de azi dispar. Efort S, salvează demo-uri întregi.
Numere care stau la coadă livrat ✓
Toate sumele aliniate la dreapta cu tabular-nums și separatoare românești (1.234,50 €), în oferte, deviz, facturi, rapoarte. O regulă mică ce face toată zona de bani să pară contabilă, nu aproximativă.
Tranziții de stare consecvente livrat parțial ✓
Un singur vocabular de mișcare: cardul care avansează fază face slide+fade spre banda următoare (150ms), toast-urile intră mereu din același colț, respectând prefers-reduced-motion. Azi unele apar instant, altele animat. Livrat: toast-urile unificate + gardă globală prefers-reduced-motion; coregrafia cardului între benzi rămâne post-demo (atinge board-ul).
Aprovizionare: progres per mașină livrat ✓
Peste swimlane-urile livrate azi: o bară subțire „2/4 recepționate" în antetul fiecărei mașini + acțiune „Comandă tot ce e De comandat" per bandă. Magazionerul termină o mașină dintr-un singur gest.
Runda a doua de audit — ce a rămas neatins de primele trei
După livrarea P2/P6/P7/P9–P11, am reluat turul de capturi. Zonele care ies acum în față nu mai sunt „ecrane aglomerate" — sunt capabilități care lipsesc: navigarea rapidă, artefactele tipăribile, drill-down-ul din cifre și primii pași ai unui cont proaspăt.
Paleta de comenzi (Ctrl+K): caută orice, fă orice
Căutarea globală găsește azi mașini și clienți — dar puterea reală e s-o transformăm în paletă: tastezi „B-412" și primești nu doar fișa, ci acțiunile pe ea (Deschide Ofertarea · Comandă piesele · Sună clientul). Tastezi „recepție" și primești „Recepție nouă". Utilizatorul avansat nu mai atinge meniul.
PropusEfort: M · Impact: mare (fiecare utilizator, fiecare zi) · Risc demo: mic — strat nou peste rutele existente, zero logică de proces.
Deviz și factură tipăribile — artefactul pe care clientul îl ține în mână
Tot ce vede clientul azi e pe ecran. O vedere „de tipar" (CSS @media print → PDF din browser) pentru oferta aprobată și factură — antet cu service-ul, linii cu manoperă/piese cuibărite, totaluri RO, semnături — transformă demo-ul într-un obiect contractual. La service-urile reale, hârtia încă închide vânzarea.
Efort: S–M · Impact: mare la vânzare · Risc demo: mic — vedere derivată, read-only.
Rapoarte: cifre care se deschid
Barele din „Încasări · 7 zile" nu au valori; KPI-urile au drill-down doar parțial. Regula: orice cifră din Rapoarte se deschide în lista care a produs-o (facturile zilei, lucrările mecanicului) + valoare pe bară la hover. Caseta „Întreabă pe Gogu" coboară sub KPI-uri — întâi cifrele, apoi conversația.
Primii pași pe contul gol
Contul gol e azi corect dar mut: un card „Primele 3 gesturi" pe Asistent (① răspunde mesajului WhatsApp → ② deschide recepția → ③ urmărește fișa în Atelier), cu bife care se completează singure din starea reală. E și scenariul demo-ului, scris în produs — prezentatorul nu mai are nevoie de notițe.
Stoc: praguri care strigă singure
Stocul are gestiuni și cantități, dar pragul minim e mut. Prag minim per articol + bandă „Sub prag · N articole" sus în pagină + propunere Gogu de comandă la furnizorul cu cel mai bun preț (reuses căutarea multi-furnizor existentă). Magazionerul nu mai descoperă lipsa la montaj.
Cum se exportă tot ce am validat aici în codul real (FE · BE · infra)
Mock-ul e specificația executabilă; pachetele de lucru sunt în
docs/planning/V5_IMPLEMENTATION_PLAN.md (WP-B/F/I/Q).
Tabelul de mai jos e puntea: fiecare pattern livrat în mock → componenta Vue care îl preia, contractul
de backend de care are nevoie și pachetul care îl găzduiește. Trei mecanisme fac exportul repetabil:
| Pattern validat în mock | FE (Vue) — unde aterizează | BE — contractul necesar | WP |
|---|---|---|---|
| Gate-uri RG1–RG3 cu refuz explicat (reducer = arbitru) | disable-with-reason pe butoanele de avans; afișarea 409 ca listă de blocaje | state machine în move_vehicle; 409 cu blockers[] (același text ca UI); forțare = endpoint separat auditat | B1·B2 |
| Ofertă cu piese cuibărite sub operațiuni + include/exclude + reducere plafonată | offer-builder-ul din ofertare.vue (azi stub); componenta de linie = pad-style | OfferLineItemModel primește operation_id (cuibărirea #45); plafon discount din config tenant | F2·B4 |
| Aprovizionare: swimlane per mașină + „Comandă toate" + progres N/M | achizitii/index.vue (azi stub) — banda per entry cu contoare | guard forward-only pe delivery_status (maparea D2) + acțiune bulk „order-all" per entry | F3·B5 |
| Fațete live pe cardul de board (Const ✓ · Ofertă ! · Piese —) | cardul din board-ul Atelier (nou); fațete = deep-link-uri (P3) | endpoint de proiecție „entry summary" (fază + sub-stare constatare + status ofertă + piese) — o singură interogare pentru board | F5 |
| Flux în direct grupat per mașină (P6) | componenta feed peste auditEvents provider (există) — gruparea e client-side | nimic nou — /workshop/audit-events există; doar cursor-pagination | F5 |
| Contabilitate ca tabel dens (P7) + bani RO (P9) | pagina de facturi (nouă) pe modelul de tabel; lib/format.ts peste tot | modelul de factură cu total (RG3) + listare sortabilă; sumele ca string decimal | B4·F4 |
| Fapte ca listă de definiții (P2) · toast + reduced-motion (P10) | FactList.vue shared + composable toast + gardă CSS globală — se pot face oricând, azi | — | F0 |
| Paletă de comenzi (P12) · print deviz/factură (P13) | overlay global (Reka Dialog) pe rutele typed-router; vedere @media print | căutare unificată (mașină/client/acțiuni) — poate porni client-side pe datele board-ului | F5·F4 |
Infra pentru toate: nimic nou până la portalul public (WP-I3) — exportul UI e FE-pur + contracte BE din planul existent. CI-ul reactivat (WP-I1) găzduiește probele de paritate.
Plan de execuție recomandat
| Când | Ce | Efort | Impact | Risc demo |
|---|---|---|---|---|
| Livrate ✓ (16 iul., verificate 591/591) |
P2 fapte ca text · P6 flux grupat · P7 Contabilitate-tabel · P9 bani RO · P10 toast+reduced-motion · P11 progres piese | — | — | ✓ în producție (mock) |
| Înainte de demo (sigure, rămase) |
P1 crom Atelier pe 2 rânduri | S | mare | mic |
| P8 mod prezentare (proiector) | S | mare la demo | mic | |
| P15 primii pași pe contul gol · P13 deviz/factură tipăribile | S–M | mare la demo | mic | |
| După demo (restructurări + arii noi) |
P4 Ofertare — tabel comparativ | M | mare | mediu |
| P5 rânduri late la benzi mici · P3 fațete-link | M | mare | mediu-mic | |
| P12 paleta de comenzi (Ctrl+K) | M | mare | mic | |
| P14 rapoarte drill-down · P16 praguri stoc | S–M | mediu | mic |
- · Deja livrate azi, din aceeași familie: fațete live pe cardul din Atelier, linii read-only în „Ofertă nouă", swimlane per mașină la Aprovizionare — direcția e validată de probe (591/591 + 39/39 + contul gol cap-coadă).
- · Orice schimbare din Iterația 2 se face cu plasa existentă:
verify-demo-account+lafix-e2e-demoînainte de push. - · Nimic din acest document nu atinge regulile de proces (RG1–RG3) — e exclusiv prezentare.
Cum s-a făcut: tur automat Playwright peste toate rutele (1440×950, showcase), evaluare pe grila 05_UI_CONVENTIONS, trei iterații de propuneri filtrate după raport impact/efort și risc pentru demo-ul de client. Wiremock-urile sunt HTML/CSS pur în tokenii v5 (light theme) — nu capturi retușate — deci pot fi promovate direct în componente.